'use strict';
import React, {
    Component
} from 'react'
import {
    Link,
} from 'react-router'
import FieldGroup from "./common/fieldGroup"
import {
    Table,
    Button,
    Modal,
    FormGroup,
    ControlLabel,
    FormControl,
    HelpBlock,
    Radio,
    Pager,
    Col,
    Row
} from 'react-bootstrap'
import {uploadImgs} from '../Tools'
import '../Scss/style.scss'
import BootstrapPage from './common/page'
export default class Instruction extends Component {
    constructor(props) {
        super(props)
        this.state = {
            showModal: false,
            activePage: 1,
            bannerData: "",
            updateId: '',
            formData: {
                title: "",
                type: 1,
                imgUrl: "",
                isShow: 1,
                isTop:true,
                mediaUrl: "",
                previewUrl:''
            },
            query:{
                type:'',
                title:''
            }

        }
    }

    componentWillMount() {
        this.querryData(1)
    }

    /**
     *
     * @param pageNum  查询页数
     */
    querryData(pageNum) {
        let type=this.state.query.type;
        type=type==""?"":type
        const rec = this;
        $.ajax({
            url:`/instructions/page/${pageNum}/10`,
            type: "get",
            data:rec.state.query,
            success: function (res) {
                rec.setState({
                    bannerData: res.data
                })
            }
        })
    }

    /**
     * 添加banner
     */
    addBanner() {
        this.setState({
            showModal: true,
            formData: {
                title: "",
                type: 1,
                imgUrl: "",
                isTop: true,
                isShow:1,
                mediaUrl: "",
                previewUrl:''
            }
        })
    }

    /**
     * 关闭弹框
     */
    modalClose() {
        this.setState({
            showModal: false
        })
    }


    /**
     *
     * @param eventKey
     * @returns {XML}
     * 选择页数
     */
    handleSelect(eventKey) {
        this.setState({
            activePage: eventKey
        })
    }


    /**
     * 新增banner
     */

    saveData(e) {
        const rec = this;
        var data = new FormData();
        const form = e.target;
        let result = this.state.formData;
        let formData = this.state.formData;
        if (this.state.updateId != "") {
            formData.id = this.state.updateId
        }
        let Url = this.state.updateId == "" ? "/instructions/add" : "/instructions/update";
        debugger
        var pic = form[1].files[0];
            if (pic != undefined) {
                formData.imgUrl=uploadImgs(pic);
                rec.setState({
                    formData: formData
                })
            }

        var pic2 = form[2].files[0];
        if (pic2 != undefined) {
            formData.previewUrl=uploadImgs(pic2);
            rec.setState({
                formData: formData
            })
        }

            if(formData.title==''){
                alert('标题不能为空')
                return
            }
            if(formData.content==''){
                alert('视频地址不能为空')
                return
            }
            if(formData.imgUrl==''){
                alert('图片不能为空')
                return
            }
        if(formData.previewUrl==''){
            alert('视频预览图片不能为空')
            return
        }
            $.ajax({
                url: Url,
                type: "post",
                data: formData,
                success: function (data) {
                    rec.setState({
                        showModal: false
                    })
                    rec.querryData(1)
                }
            })

    }

    /**
     *
     * @param e
     * @param id  banner的id
     */
    deleteBanner(id) {
        const rec = this;
        $.ajax({
            url: "/instructions/delete",
            type: "post",
            data: {
                ids: id
            },
            success: function (data) {
                if (data.code == 200) {
                    rec.querryData(1)
                }
            }
        })
    }

    /**
     *
     * @param data 当前修改banner数据
     * @param e
     */
    updateBanner(data, e) {
        this.state.formData = {
            title: data.title,
            isTop: data.top=="0"?false:true,
            type: data.type,
            imgUrl: data.imgUrl,
            previewUrl: data.previewUrl,
            isShow: data.isShow,
            mediaUrl: data.mediaUrl,
        }
        this.setState({
            updateId: data.id,
            showModal: true,
            formData: this.state.formData
        })
    }

    /**
     *
     * @param name input 的标识
     * @param e
     */
    inputChange(name, e) {
        this.state.formData[name] = e.target.value;
        this.setState({
            formData: this.state.formData
        })
    }

    /**
     *是否展示改变事件
     */
    showChange(type) {
        let formData=this.state.formData
        if(type=="isShow"){
            formData.isShow=formData==0?1:0
        }else{
            this.state.formData[type] = !this.state.formData[type]

        }
        this.setState({
            formData: this.state.formData
        })
    }

    bannerType(type) {
        switch (type) {
            case 1:
                return "家长端"
            case 2:
                return "教师端"
            default:
                return '未知'
        }
    }

    /**
     *  改变查询数据
     *
     */

    changeQuery(type,e){
        this.state.query[type] =e.target.value
        this.setState({
            query: this.state.query
        })

    }
    render() {
        const {updateId, bannerData, formData,showModal} = this.state;
        const rec = this;
        const tableData = bannerData.list ? bannerData.list.map(function (data, index) {
            return (
                <tr>
                    <td className="hidden">{data.id}</td>
                    <td>{index + 1}</td>
                    <td><img className="smallpic" src={data.imgUrl}/></td>
                    <td><img className="smallpic" src={data.previewUrl}/></td>
                    <td>{rec.bannerType(data.type)}</td>
                    <td>{data.isTop == "0"?"否" : "是"}</td>
                    <td>{data.isShow == 1 ? "是" : "否"}</td>
                    <td>{data.title}</td>
                    <td>{data.mediaUrl}</td>
                    <td><Button onClick={rec.updateBanner.bind(rec, data)}>修改</Button> <Button
                        onClick={rec.deleteBanner.bind(rec, data.id)}>删除</Button></td>
                </tr>
            )
        }) : []
        return (
            <div className='bannerPage'>
                <Row md={12}>
                    <div className="addBtn">

                        <FormGroup controlId="formControlsSelect">
                            <Button md={2} bsStyle="info" onClick={this.querryData.bind(this,1)} >查询</Button>
                            <Button md={2} bsStyle="info" onClick={this.addBanner.bind(this)} style={{float:'right',marginRight:'40px'}}>添加banner</Button>
                            <Col md={2}>
                                <FormControl componentClass="select" placeholder="请选择banner类型" onChange={this.changeQuery.bind(this,'type')}>
                                    <option value="">全部</option>
                                    <option value={1}>家长端</option>
                                    <option value={2}>教师端</option>
                                </FormControl>
                            </Col>
                            <Col md={2}>
                                <FormControl
                                    type="text"
                                    value={this.state.value}
                                    placeholder="请输入banner标题"
                                    onChange={this.changeQuery.bind(this,'title')}
                                    style={{display:'inline-block'}}
                                />
                            </Col>
                        </FormGroup>
                    </div>
                </Row>

                <Table striped bordered condensed hover responsive className="bannerTable">
                    <thead>
                    <tr>
                        <th className="hidden">id</th>
                        <th>序号</th>
                        <th>图片</th>
                        <th>视频预览图片</th>
                        <th>客户端</th>
                        <th>是否置顶</th>
                        <th>是否展示</th>
                        <th>标题</th>
                        <th>视频地址</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    {tableData}
                    </tbody>
                </Table>
                <BootstrapPage
                    pages={bannerData.pages}
                    pageNum={bannerData.pageNum}
                    prePage={bannerData.prePage}
                    nextPage={bannerData.nextPage}
                    itemclick={this.querryData.bind(this)}
                />
                <div className="addContent">
                    <Modal show={showModal} onHide={this.modalClose.bind(this)}>
                        <Modal.Header closeButton>
                            <Modal.Title>操作指南信息</Modal.Title>
                        </Modal.Header>
                        <Modal.Body>
                            <form id="addBanner" onSubmit={this.saveData.bind(this) }>
                                <FieldGroup
                                    id="title"
                                    inputRef="title"
                                    type="text"
                                    label="标题"
                                    placeholder="请输入标题"
                                    value={formData.title}
                                    onChange={this.inputChange.bind(this, 'title')}

                                />
                                <FieldGroup
                                    id="imgUrl"
                                    type="file"
                                    label="操作图片"
                                    // help="请上传合适大小的图片"
                                />
                                <FieldGroup
                                    id="previewUrl"
                                    type="file"
                                    label="视频预览图片"
                                    // help="请上传合适大小的图片"
                                />
                                <img className="smallBanner" src={formData.imgUr}/>

                                <FormGroup  controlId="formControlsSelect" className="bannerTypeSelect">
                                    <ControlLabel>客户端</ControlLabel>
                                    <FormControl componentClass="select" placeholder="请选择banner类型"
                                                 onChange={this.inputChange.bind(this, 'type')}>
                                        <option value={1}>家长端</option>
                                        <option value={2}>教师端</option>
                                    </FormControl>

                                </FormGroup>
                                <FormGroup>
                                    <ControlLabel style={{marginRight:"20px"}}>是否置顶</ControlLabel>
                                    <Radio controlId="top" value={true} inline name="isTop"
                                           checked={formData.isTop == "1" ? true : false}
                                           onChange={this.showChange.bind(this,"isTop")}>
                                        是
                                    </Radio>
                                    <Radio controlId="top" value={false} inline name="isTop"
                                           checked={formData.isTop == "0" ? true : false}
                                           onChange={this.showChange.bind(this,"isTop")}>
                                        否
                                    </Radio>
                                </FormGroup>
                                <FormGroup style={{display:updateId?'block':'none'}}>
                                    <ControlLabel style={{marginRight:"20px"}}>是否展示</ControlLabel>
                                    <Radio controlId="show" value={1} inline name="isShow"
                                           checked={formData.isShow == "1" ? true : false}
                                           onChange={this.showChange.bind(this,"isShow")}>
                                        是
                                    </Radio>
                                    <Radio controlId="hidden" value={0} inline name="isShow"
                                           checked={formData.isShow == "0" ? true : false}
                                           onChange={this.showChange.bind(this,"isShow")}>
                                        否
                                    </Radio>
                                </FormGroup>
                                <FormGroup controlId="content">
                                    <ControlLabel>视频地址</ControlLabel>
                                    <FormControl value={formData.mediaUrl}
                                                 onChange={this.inputChange.bind(this, 'mediaUrl')}/>
                                </FormGroup>
                                <Button bsStyle="info" type="submit">确定</Button>
                            </form>
                        </Modal.Body>
                        <Modal.Footer>
                        </Modal.Footer>
                    </Modal>

                </div>
            </div>
        )
    }
}
